<template>
	<Card :shadow="shadow" class="info-card-wrapper" :padding="0">
		<div class="content-con">
			<div class="left-area" :style="{ background: color, width: leftWidth }">
				<common-icon class="icon" :type="icon" :size="iconSize" color="#fff" />
			</div>
			<div class="right-area" :style="{ width: rightWidth }">
				<div>
					<slot></slot>
				</div>
			</div>
		</div>
	</Card>
</template>

<script>
import CommonIcon from '_c/common-icon';
export default {
	name: 'InforCard',
	components: {
		CommonIcon
	},
	props: {
		left: {
			type: Number,
			default: 36
		},
		color: {
			type: String,
			default: '#2d8cf0'
		},
		icon: {
			type: String,
			default: ''
		},
		iconSize: {
			type: Number,
			default: 20
		},
		shadow: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		leftWidth() {
			return `${this.left}%`;
		},
		rightWidth() {
			return `${100 - this.left}%`;
		}
	}
};
</script>

<style lang="less">
.common {
	float: left;
	height: 100%;
	display: table;
	text-align: center;
}
.size {
	width: 100%;
	height: 100%;
}
.middle-center {
	display: table-cell;
	vertical-align: middle;
}
.info-card-wrapper {
	.size;
	overflow: hidden;
	.ivu-card-body {
		.size;
	}
	.content-con {
		.size;
		position: relative;
		.left-area {
			.common;
			& > .icon {
				.middle-center;
			}
		}
		.right-area {
			.common;
			& > div {
				.middle-center;
			}
		}
	}
}
</style>
